<script setup lang='ts'>
  import { ruleList, oss_url } from '@/pinia/getter';
  import ruleBack from './ruleBack.vue';
  const getHsiangHsien = (text:any)=>{
    return text.replaceAll('\n','<br>')
  }
</script>

<template>
  <div class="content">
    <ruleBack v-for="item in ruleList">
        <template #titleImg>
          <img :src="oss_url + item.Heading">
        </template>
        <template v-for="rule in item.ruleList">
          <div class="titleText">{{ rule.subtitle }}</div>
          <dl v-for="ruleText in rule.ruleinfo" class="ruleText">
            <dt>{{ ruleText.dt }}</dt>
            <dd v-for="text in ruleText.ddList">
              <div v-html="getHsiangHsien(text.dd)"></div>
            </dd>
          </dl>
        </template>
    </ruleBack>
  </div>
</template>

<style lang='scss' scoped>
  .content {
    position: fixed;
    width: 100vw;
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px 10px 30px;
    box-sizing: border-box;
    min-height: 100vh;
    background: var(--rulePageBackColor);
    .my-10 {
      margin: 10px 0;
    }
    .mb-10 {
      margin-bottom: 10px;
    }
    .ruleBack {
      margin-bottom: 20px;
    }
    .titleText {
      width: 305px;
      height: 24px;
      line-height: 24px;
      color: var(--ruleTitleFontColor);
      font-size: 14px;
      font-weight: 500;
      text-align: center;
      margin: 16px auto 0;
      background: var(--ruleTitleBackColor);
      border-radius: 4px;
    }
    .ruleText {
      margin-top: 10px;
      font-size: 12px;
      font-weight: 500;
      line-height: 18px;
      dt {
        color: var(--ruleDtFontColor);
      }
      dd {
        color: var(--ruleDdFontColor);
      }
    }
    .tableBox {
      margin-top: 20px;
      overflow: hidden;
      width: 100%;
      border-radius: 12px;
      border: var(--ruleTableBorder);
      margin: 15px 0 0;
      
      li {
        flex: 1;
        color: var(--ruleTableFontColor);
        font-weight: 400;
        text-align: center;
      }
      li:nth-child(1) {
        flex: none;
        width: 80px !important;
      }
      .titleTable {
        ul {
          li {
            font-size: 14px;
          }
        }
      }
      .listTable {
        height: max-content;
        min-height: 36px;
        
        li {
          min-height: 36px;
          font-size: 12px;
          border-bottom: var(--ruleTableBorder);
          border-right: var(--ruleTableBorder);
          padding: 0 4px;
          box-sizing: border-box;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        li:nth-last-child(1) {
          border-right:none;
        }
      }
      .listTable:nth-last-child(1) {
        li{
          border-bottom: none;
        }
      }
    }
    .richList {
      li:nth-child(3) {
        min-width: 100px !important;
      }
    }
    .taskList {
      li:nth-child(1) {
        width: 120px !important;
      }
    }
  }
</style>